<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue设值语法3</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="d">
    <h2>v-model 双向绑定表单元素</h2>
    <form>
        姓名: <input v-model="user.username"><br>
        密码: <input v-model="user.password"><br>
        性别: <input type="radio" value="男" v-model="user.gender">男
             <input type="radio" value="女" v-model="user.gender">女 <br>
        爱好: <input type="checkbox" value="1" v-model="user.likes">篮球
             <input type="checkbox" value="2" v-model="user.likes">电影
             <input type="checkbox" value="3" v-model="user.likes">手游<br>
        籍贯: <select v-model="user.location">
                <option v-for=" i in items">{{i}}</option>
             </select>
        自我介绍: <textarea v-model="user.intro"></textarea>
    </form>
</div>
<script>
    var v = new Vue({
        el : "#d",
        data : {
            user : {
                username : "张三",
                password : "123",
                gender : "男",
                likes : [1,2],
                location : "广东",
                intro: "我是张三, 我很牛"
            },
            items : ["湖南","湖北","广东","广西"],
        }
    });
</script>
</body>
</html>